<template>
<div class="nav-menu scroll-bar">
    <div class="logo-box" @click="goHome">
        <i class="iconfont icon-liulanqitubiao"></i>
    </div>
    <el-menu :collapse-transition="false" :collapse="true" router :default-active="`/${$route.path.split('/')[1]}`" background-color="#001A2E" text-color="#fff" active-text-color="#fff">
        <template v-for="(item, i) in menuList">
            <!-- 此菜单下还有子菜单 -->
            <el-submenu v-if="item.children" :key="i" :index="item.path">
                <template slot="title">
                    <i :class="`side-icon ${item.icon}`"></i>
                    <span slot="title">{{item.name}}</span>
                    <div class="menu-title">{{item.name}}</div>
                </template>
                <!-- 递归 -->
                <sub-menu :menuList="item.children" :index="i"></sub-menu>
            </el-submenu>
            <!--一级菜单 -->
            <el-menu-item v-if="!item.children&&!item.hidden" :key="i" :index="item.path">
                <i :class="`side-icon ${item.icon}`"></i>
                <span slot="title">{{item.name}}</span>
                <div class="menu-title">{{item.name}}</div>
            </el-menu-item>
        </template>
    </el-menu>
</div>
</template>

<script>
import SubMenu from './SubMenu'
import { mapGetters } from 'vuex'
export default {
    name: 'NavMenu',
    components: {
        SubMenu
    },
    computed: {
        ...mapGetters({
            menuList: 'common/getMenuList'
        })
    },
    methods: {
        goHome () {
            this.$router.push('/login')
        }
    }
}
</script>

<style lang="less">
.nav-menu {
    .is-active {
        background: #004275 !important;
    }

    .el-menu-item,
    .el-submenu {
        height: 85px;

        .el-tooltip,
        .el-submenu__title {
            height: 85px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .side-icon {
            padding-right: 0;
            height: 20px;
            font-size: 20px;
            line-height: 20px;
            margin-bottom: 10px;
        }
    }

    .logo-box {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        i {
            color: #ffffff;
            font-size: 30px;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
        }
    }

    .menu-title {
        line-height: 14px;
    }
}
</style>
